<template>
	<div class="ratings">
		<s-user-list-top :data="data.user" :small="true" @getUserInfo="handleGetUserInfo"></s-user-list-top>
		<div class="rating-content">
			<!--第一个回复者-->
			<div class="rating-content__say" @click="replay">{{data.says}}</div>
			<!--其他回复者-->
			<div class="rating-content__reply" v-for="item in data.replay">
				<s-user-list-top :data="item.user" :small="true" @getUserInfo="handleGetUserInfo"></s-user-list-top>
				<div class="rating-content__reply--detail" @click="replay">
					<span>回复@{{item.to}}:&nbsp;</span>
					<span>{{item.says}}</span>
				</div>
			</div>		
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object
			}
		},
		methods: {
			handleGetUserInfo(id) {
				this.$router.push("/user_info");
			},
			replay() {
				this.$store.commit("changeSendingMsg", { bool: true });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ratings {
		padding: $com-padding-lr-base;
	}
	.ratings:not(:last-child ){
		border-bottom: 2px solid $gray-lighter;
	}
	.rating-content {
		padding-left: 2rem;
		font-size: $font-xs;
		letter-spacing: 1px;
		line-height: 1.5;
	}
	.rating-content__say {
		padding: rem(8) 0;
		border-bottom: 1px dashed #eee;
	}
	.rating-content__reply {
		padding: rem(10) 0;
		
	}
	.rating-content__reply:not(:last-of-type) {
		border-bottom: 1px dashed #eee;
	}
	.rating-content__reply--detail {
		margin-left: 2rem;
	}
</style>